<template>
  <div class="dashboard-container">
    <h3 style="margin: 0 0 20px 0">常用功能</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in quick" :key="item.id">
        <img :src="item.icon" />
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0">echarts系列</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in echartsList" :key="item.id">
        <img :src="item.icon" />
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0">css特效</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in cssList" :key="item.id">
        <img :src="item.icon" />
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0">博客系列</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in blogList" :key="item.id">
        <img :src="item.icon" />
        <router-link :to="item.link">{{ item.label }}</router-link>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0">外部工具区</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in toolList" :key="item.id">
        <img :src="item.icon" />
        <a :href="item.link" target="_blank">{{ item.label }}</a>
      </div>
    </div>
    <h3 style="margin: 20px 0 20px 0">图标UI组件库</h3>
    <div class="container statistics_sum shadow" style="border-radius: 8px">
      <div class="content" v-for="item in uiLists" :key="item.id">
        <img :src="item.icon" />
        <a :href="item.link" target="_blank">{{ item.label }}</a>
      </div>
    </div>
    <h3>数据概况</h3>
    <div class="data-container shadow">
      <el-row>
        <el-col :span="4" class="data-item">
          <span class="colorc" style="font-size: 20px">11023人</span>
          <span style="font-size: 16px; margin-top: 5px">收藏模板</span>
        </el-col>
        <el-col :span="4" class="data-item">
          <span class="colorb" style="font-size: 20px">6280次</span>
          <span style="font-size: 16px; margin-top: 5px">下载模板</span>
        </el-col>
        <el-col :span="4" class="data-item">
          <span class="colora" style="font-size: 20px">10721人</span>
          <span style="font-size: 16px; margin-top: 5px">分享模板</span>
        </el-col>
      </el-row>
    </div>
    <h3>图表分析</h3>
    <div class="chart">
      <div class="chart-bing shadow">
        <div class="bing"></div>
      </div>
      <div class="chart-tiao shadow">
        <div class="tiao"></div>
      </div>
      <div class="chart-xian shadow">
        <div class="xian"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import tool from "@/utils/toolList";
import uiList from "@/utils/uiList";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name", "staffPhoto"]),
  },
  data() {
    return {
      quick: [
        {
          id: 0,
          link: "/tool/quillEditor",
          label: "富文本编辑器",
          icon: require("@/assets/home/富文本.png"),
        },
        {
          id: 1,
          link: "/tool/excel",
          label: "excel上传下载",
          icon: require("@/assets/home/excel.png"),
        },
        {
          id: 2,
          link: "/tool/map",
          label: "百度地图",
          icon: require("@/assets/home/百度地图.png"),
        },
        {
          id: 3,
          link: "/tool/grey",
          label: "网站变灰",
          icon: require("@/assets/home/07网站项目.png"),
        },
        {
          id: 4,
          link: "/tool/drawer",
          label: "系统管理",
          icon: require("@/assets/home/m_outsource.png"),
        },
        {
          id: 5,
          link: "/tool/dragDialog",
          label: "拖拽Dialog",
          icon: require("@/assets/home/拖拽.png"),
        },
        {
          id: 6,
          link: "/tool/GDmap",
          label: "高德地图",
          icon: require("@/assets/home/高德地图.png"),
        },
        {
          id: 7,
          link: "/user/index",
          label: "个人中心",
          icon: require("@/assets/home/个人中心.png"),
        },
        {
          id: 8,
          link: "/tool/i18n",
          label: "国际化",
          icon: require("@/assets/home/国际网络.png"),
        },
        {
          id: 9,
          link: "/tool/slider",
          label: "slider滑块",
          icon: require("@/assets/home/滑动条.png"),
        },
        {
          id: 10,
          link: "/tool/zip",
          label: "zip下载",
          icon: require("@/assets/home/zip.png"),
        },
        {
          id: 11,
          link: "/tool/pdf",
          label: "pdf下载",
          icon: require("@/assets/home/pdf.png"),
        },
        {
          id: 12,
          link: "/tool/iconSelect",
          label: "icon下拉",
          icon: require("@/assets/home/下拉功能按钮.png"),
        },
        {
          id: 13,
          link: "/tool/menuTree",
          label: "菜单树下拉",
          icon: require("@/assets/home/MBE风格常用图标-文件夹.png"),
        },
        {
          id: 14,
          link: "/tool/rgba",
          label: "rgba滑块",
          icon: require("@/assets/home/颜色调整.png"),
        },
        {
          id: 15,
          link: "/message/msgindex",
          label: "消息提示",
          icon: require("@/assets/home/消息.png"),
        },
        {
          id: 16,
          link: "/tag/tagIndex",
          label: "标签",
          icon: require("@/assets/home/标签.png"),
        },
        {
          id: 17,
          link: "/transfer/transferIndex",
          label: "穿梭框",
          icon: require("@/assets/home/穿梭框.png"),
        },
      ],
      echartsList: [
        {
          id: 0,
          link: "/dataAnalysis/production",
          label: "折线图",
          icon: require("@/assets/home/折线图.png"),
        },
        {
          id: 1,
          link: "/dataAnalysis/health",
          label: "柱状图",
          icon: require("@/assets/home/柱状图.png"),
        },
        {
          id: 2,
          link: "/dataAnalysis/pie",
          label: "饼图",
          icon: require("@/assets/home/饼图-南丁格尔.png"),
        },
        {
          id: 3,
          link: "/dataAnalysis/scatter",
          label: "散点图",
          icon: require("@/assets/home/散点图.png"),
        },
        {
          id: 4,
          link: "/dataAnalysis/candlestick",
          label: "k线图",
          icon: require("@/assets/home/K线图.png"),
        },
        {
          id: 5,
          link: "/dataAnalysis/radar",
          label: "雷达图",
          icon: require("@/assets/home/雷达图.png"),
        },
      ],
      cssList: [
        {
          id: 0,
          link: "/cssThree/slidebartitle",
          label: "幻灯条标题",
          icon: require("@/assets/home/标题栏.png"),
        },
        {
          id: 1,
          link: "/cssThree/scrollText",
          label: "滚动文字",
          icon: require("@/assets/home/自动滚屏.png"),
        },
        {
          id: 2,
          link: "/cssThree/buttonHoverStroke",
          label: "按钮悬停描边",
          icon: require("@/assets/home/发声按钮.png"),
        },
        {
          id: 3,
          link: "/cssThree/buttonHoverMultistroke",
          label: "按钮悬停多重描边",
          icon: require("@/assets/home/悬浮按钮.png"),
        },
        {
          id: 4,
          link: "/cssThree/buttonHoverFlashes",
          label: "按钮悬停闪烁",
          icon: require("@/assets/home/闪烁.png"),
        },
        {
          id: 5,
          link: "/cssThree/dotAnimation",
          label: "圆点动画",
          icon: require("@/assets/home/圆点.png"),
        },
        {
          id: 6,
          link: "/cssThree/snowAnimation",
          label: "飘雪动画",
          icon: require("@/assets/home/雪花.png"),
        },
        {
          id: 7,
          link: "/cssThree/maskEffect",
          label: "遮罩效果",
          icon: require("@/assets/home/阴影.png"),
        },
        {
          id: 8,
          link: "/cssThree/todoList",
          label: "计划表效果",
          icon: require("@/assets/home/采购计划.png"),
        },
        {
          id: 9,
          link: "/cssThree/particles",
          label: "粒子特效",
          icon: require("@/assets/home/粒子.png"),
        },
        {
          id: 10,
          link: "/cssThree/verbatimEffect",
          label: "逐字特效",
          icon: require("@/assets/home/文字.png"),
        },
      ],
      blogList: [
        {
          id: 0,
          link: "blog/blogList",
          label: "博客文章列表",
          icon: require("@/assets/home/文章.png"),
        },
      ],
      toolList: [],
      uiLists: [],
    };
  },
  mounted() {
    this.getChartsBingList();
    this.getChartsTiaoList();
    this.getChartsXianList();
    this.toolList = tool;
    this.uiLists = uiList;
  },
  methods: {
    // 饼图
    getChartsBingList() {
      var chartDom = document.querySelector(".bing");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "模板数据分析",
            type: "pie",
            radius: "50%",
            data: [
              { value: 11023, name: "收藏模板" },
              { value: 6280, name: "下载模板" },
              { value: 10721, name: "分享模板" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    // 条形图/柱状图
    getChartsTiaoList() {
      var chartDom = document.querySelector(".tiao");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["下载模板", "收藏模板", "分享模板"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数据",
            type: "bar",
            data: [6280, 11023, 10721],
            barWidth: 30,
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 折线图
    getChartsXianList() {
      var chartDom = document.querySelector(".xian");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["下载模板", "收藏模板", "分享模板"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据",
            type: "line",
            data: [6280, 11023, 10721],
            itemStyle: {
              normal: {
                color: "#fa6e86", //折线点的颜色
                borderColor: "#ffffff", //拐点边框颜色
                borderWidth: 2, //拐点边框大小
              },
            },
            lineStyle: {
              color: "#19d4ae", //折线的颜色
            },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-row {
    width: 100%;
    .el-col {
      margin: 10px 0;
    }
  }
  .data-item {
    display: flex;
    flex-direction: column;
    span:nth-child(1) {
      font-size: 16px;
      padding: 10px 0;
    }
    span:nth-child(2) {
      font-size: 13px;
    }
  }
}

.statistics_sum {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: auto;
  .statistics_sum_item {
    display: flex;
    flex-direction: column;
    span:nth-child(1) {
      font-size: 16px;
      padding: 10px 0;
    }
    span:nth-child(2) {
      font-size: 13px;
    }
  }
}
.shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.chart {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .chart-bing {
    width: 320px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .bing {
      width: 300px;
      height: 300px;
    }
  }
  .chart-xian {
    width: 450px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .xian {
      width: 430px;
      height: 300px;
    }
  }
  .chart-tiao {
    width: 450px;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    .tiao {
      width: 430px;
      height: 300px;
    }
  }
}

h3 {
  font-weight: 500;
  color: #999999;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: auto;

  .content {
    flex-shrink: 0;
    width: 20%;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    padding-left: 20px;
    margin: 10px 0;
    &:hover {
      color: #1aa97b;
      transition: all 0.3s;
    }

    img {
      width: 35px;
      height: 35px;
      vertical-align: middle;
    }
    a {
      margin-left: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
      height: 40px;
    }
  }
}

.colora {
  color: #19d4ae;
}

.colorb {
  color: #5ab1ef;
}

.colorc {
  color: #fa6e86;
}
</style>
